//专门用来重绘游戏界面的类
require('../libs/weapp-adapter')
import Blankpoker from '../base/blankpoker'
import Poker from '../base/poker'
import Operation from '../base/operation'

const pokerWidth = (window.innerWidth - 10) / 4;
const operWidth = (window.innerWidth - 2 * pokerWidth) / 3;
const context = window.canvas.getContext('2d');

export default class GameInfo {

  constructor() {
    this.calculateImage = wx.createImage();
    this.calculateImage.src = './images/calculate.gif';
    this.restartImage = wx.createImage();
    this.restartImage.src = './images/restart.gif';
    this.givenPokers;
    this.result = 0;
    this.bgImage = wx.createImage();
    this.bgImage.src = './images/bg.jpg';
      this.pokers = [];
      this.operations = [];
    this.blankPoker1 = new Blankpoker(operWidth, window.innerHeight / 2 + 110, pokerWidth, context);
   this.blankPoker2 = new Blankpoker(operWidth * 2 + pokerWidth, window.innerHeight / 2 + 110, pokerWidth, context);
    this.blankPokers = [this.blankPoker1, this.blankPoker2];
    this.restart();
    }

//重绘界面上的所有元素
  render(){

   context.clearRect(0, 0, window.canvas.width, window.canvas.height);
  //  context.drawImage(this.bgImage,0,0);
   
    this.pokers.forEach((item) => {
      item.draw(item.x, item.y);
    });
    this.blankPokers.forEach((item) => {
      item.draw(item.x, item.y);
    });
    this.operations.forEach((item) => {
      item.draw();
    });

    context.fillStyle = "#1c20de";
   context.font = "20px Arial";
   context.fillText(
     '结果值：' + this.result,
     pokerWidth / 3 + operWidth, window.innerHeight / 2 + 50
   );

/*
//计算按钮
    context.drawImage(this.calculateImage, window.innerWidth / 2 / 6, window.innerHeight - (window.innerHeight / 12), 100, 30);
    canvas.addEventListener('touchstart', ((e) => {
      e.preventDefault();

      let x = e.touches[0].clientX;
      let y = e.touches[0].clientY;
      //判断触摸点是否在符号的范围内
      if (y > window.innerHeight - (window.innerHeight / 12) && y < window.innerHeight - (window.innerHeight / 12) + 30 && x > window.innerWidth / 2 / 6 && x < window.innerWidth / 2 / 6 + 100) {
        console.log('====计算按钮====');
      }
    }).bind(this.calculateImage));

    //重新开始按钮
    context.drawImage(this.restartImage, window.innerWidth / 2 + 30, window.innerHeight - (window.innerHeight / 12), 100, 30);
    canvas.addEventListener('touchstart', ((e) => {
      e.preventDefault();

      let x = e.touches[0].clientX;
      let y = e.touches[0].clientY;
      //判断触摸点是否在符号的范围内
      if (y > window.innerHeight - (window.innerHeight / 12) && y < window.innerHeight - (window.innerHeight / 12) + 30 && x > window.innerWidth / 2 + 30 && x < window.innerWidth / 2 + 30 + 100) {
        this.restart();
        // this.render();
        console.log('====重新开始按钮====');
      }
    }).bind(this.restartImage));
    */
 }

 restart(){
   this.givenPokers = [];

   let pokerName1 = this.genOnePoker();
   let poker1 = new Poker(pokerName1, pokerWidth * 0 + 2, window.innerHeight / 12, pokerWidth, context);

   let pokerName2 = this.genOnePoker();
   let poker2 = new Poker(pokerName2, pokerWidth * 1 + 4, window.innerHeight / 12, pokerWidth, context);

   let pokerName3 = this.genOnePoker();
   let poker3 = new Poker(pokerName3, pokerWidth * 2 + 6, window.innerHeight / 12, pokerWidth, context);

   let pokerName4 = this.genOnePoker();
   let poker4 = new Poker(pokerName4, pokerWidth * 3 + 8, window.innerHeight / 12, pokerWidth, context);
   let pokers = [poker1, poker2, poker3, poker4];

   let operation1 = new Operation(context, '+', window.innerHeight / 2 + 120);//第一个运算符号
   let operation2 = new Operation(context, '+', window.innerHeight / 2 + 190);//第二个运算符号
   let openParen = new Operation(context, '(');//左括号
   let closeParen = new Operation(context, ')');//右括号
   let operations = [operation1, operation2, openParen, closeParen];

   this.pokers = pokers;
   this.operations = operations;

   pokers.forEach((item) => {
     item.gameInfo = this;
   });
   operations.forEach((item) => {
     item.gameInfo = this;
   });
 }

  genOnePoker() {
 
    let suits = ['diamond', 'club', 'heart', 'spade'];
    let suit = suits[Math.round(Math.random() * 3 + 0)];
    let point = Math.round(Math.random() * 12 + 1);
    if (this.givenPokers.indexOf(suit + '_' + point) >= 0) {
      return this.genOnePoker();
    } else {
      var pokerName = suit + '_' + point;
      this.givenPokers.push(pokerName);
      return pokerName;
    }
}
}
